<template>
  <div class="options-box">
    <a-page-header class="page-header mb-24" title="抽奖方案配置" />
    <div class="space">
      <span class="title" style="align-self: start">
        <icon-font type="icon-faxian" />主题配置：</span>
      <div class="img-box">
        <div class="theme-img" :style="`background-image: url(${item.reviewZtUrl})`" v-for="item of data.bg"
          :key="item.id">
          <div class="edit">
            <div @click="onClick_openPop('theme', true, item)">
              <EditOutlined />
            </div>
            <div @click="onClick_delItem(1, item.id)">
              <DeleteOutlined />
            </div>
          </div>
        </div>
        <div class="theme-img add" @click="onClick_openPop('theme')">
          <PlusOutlined />新建
        </div>
      </div>
    </div>
    <div class="space">
      <span class="title"><icon-font type="icon-liwuhuodong" />奖项配置：</span>
      <a-select class="jx-select" :value="nowAreas" :options="areas" @change="handleChange" />
      <EditOutlined class="edit-icon" @click="onClick_openPop('select')" />
    </div>
    <div class="space">
      <span class="title"><icon-font type="icon-jurassic_apply" />奖品配置：</span>
      <div class="space-right">
        共{{ data.jp?.length || 0 }}个
        <a-button key="submit" type="primary" @click="onClick_openPop('gift')">新增</a-button>
      </div>
    </div>
    <div class="jp-list mb-24">
      <div v-for="item of data.jp" :key="item.id">
        <div class="theme-img" :style="`background-image: url(${item.reviewUrl})`">
          <div class="edit">
            <div @click="onClick_openPop('gift', true, item)">
              <EditOutlined />
            </div>
            <div @click="onClick_delItem(1, item.id)">
              <DeleteOutlined />
            </div>
          </div>
        </div>
        <div class="jp-name">{{ item.name }}</div>
      </div>
    </div>
    <div class="mb-24 space">
      <span class="title"><icon-font type="icon-charulianjie" />名单配置：</span>
      <div class="scv-list">
        <a-upload-dragger name="file" :customRequest="upBgOver" :show-upload-list="false">
          <UploadOutlined />
          <span class="ant-upload-text">点击或拖拽上传</span>
        </a-upload-dragger>
        <div class="scv-box" v-for="(item, index) of data.xlsx_name" @click="lookFile(item.id)" :key="index">
          <FileOutlined />
          <span class="title">{{ item.name }}</span>
          <div class="csv-del" @click.stop="csvDel(item.id)">
            <CloseCircleOutlined />
          </div>
        </div>
      </div>
    </div>
    <div class="csv-tips">
      *温馨提示：请上传xlsx格式文件，<span class="down" @click="downXlsx">下载模板</span>
    </div>
    <Poppup :popType="popType" :eidtData="eidtData" :isEdit="isEdit" :areasList="areas" @closePop="closePop"
      @reload="reload"></Poppup>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Modal, message } from "ant-design-vue";
import {
  PlusOutlined,
  CloseCircleOutlined,
  EditOutlined,
  DeleteOutlined,
  UploadOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { createFromIconfontCN } from "@ant-design/icons-vue";
const IconFont = createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/c/font_4312007_9c9mbdwwq.js",
});
import * as Api from "@req/api";
import Poppup from "@com/popup/index.vue";
const [messageApi, contextHolder] = message.useMessage();
const envCfg = import.meta.env;
const popType = ref("");
const eidtData = ref(null);
const isEdit = ref(false);
const nowAreas = ref("");

const areas = ref([]);

const data = ref({});

onMounted(() => {
  reload();
});

const handleChange = (e) => {
  nowAreas.value = e;
};

const getImgUrl = async (url) => {
  if (!url) return "";
  return await Api.getFileUrl(url);
};

const onClick_openPop = (type, edit, item) => {
  item && (item = JSON.parse(JSON.stringify(item)));
  isEdit.value = false;
  eidtData.value = null;
  if (edit) {
    eidtData.value = item;
    isEdit.value = edit;
  }
  popType.value = type;
};

const onClick_delItem = (type, id) => {
  Modal.confirm({
    title: "确认删除吗？",
    content: "删除后不可恢复，需重新配置",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      Api.delLottery({ id }).then((res) => {
        if (res.code == 0) {
          reload();
          setTimeout(() => {
            Modal.success({
              title: "提示",
              content: "删除成功",
              okText: "确认",
            });
          }, 500);
        }
      });
    },
  });
};

const upBgOver = (e) => {
  let forms = new FormData();
  forms.append("file", e.file);
  Api.pushUname(forms).then((res) => {
    if (!res.code == 0) return;
    reload();
  });
};

const csvDel = (id) => {
  Modal.confirm({
    title: "确认删除吗？",
    content: "删除后不可恢复，需重新配置",
    okText: "确认",
    cancelText: "取消",
    onOk() {
      Api.delUname({ id }).then((res) => {
        if (res.code == 0) {
          reload();
          setTimeout(() => {
            Modal.success({
              title: "提示",
              content: "删除成功",
              okText: "确认",
            });
          }, 500);
        }
      });
    },
  });
};

const lookFile = async (id) => {
  const fileUrl = await Api.downUname(id);
  console.log(fileUrl);
};

const closePop = (val) => {
  popType.value = "";
  !val && reload();
};

const downXlsx = () => {
  let href = window.location.href;
  let idx = href.indexOf("#");
  if (idx == -1) {
    window.location = "/模板.xlsx";
  } else {
    let url = href.substring(0, href.indexOf("/"));
    window.location = url + "模板.xlsx";
  }
};

const reload = () => {
  // Api.getInfo().then((res) => {
  //   if (res.code == 0) {
  //     data.value = {
  //       bg: res.data.bg || [],
  //       jp: res.data.jp || [],
  //       jx: res.data.jx || [],
  //       xlsx_name: res.data.xlsx_name || [],
  //     };

  //     data.value.bg?.map(async (v) => {
  //       v.reviewUrl = await getImgUrl(v.url);
  //       v.reviewZtUrl = await getImgUrl(v.zt_url);
  //     });

  //     data.value.jp?.map(async (v) => {
  //       v.reviewUrl = await getImgUrl(v.url);
  //     });
  //     let list = data.value.jx;
  //     if (list && list.length > 0) {
  //       areas.value = list.map((v) => {
  //         return { value: v.id, label: v.name };
  //       });
  //       nowAreas.value = areas.value[0].label;
  //     }
  //   }
  // });
};
</script>


<style lang='postcss' scoped>
.options-box {
  padding: 16px;
  position: relative;

  &::after {
    display: block;
    content: "";
    top: 125px;
    left: 36px;
    height: calc(100% - 245px);
    width: 3px;
    position: absolute;
    background-color: #00b6e8;
    z-index: 0;
  }
}

.page-header {
  border-bottom: 5px solid #00b6e8;
  /* border-bottom: 5px solid v-bind(envCfg.VITE_THEM_COLOR); */
  margin-bottom: 24px;
}

.space {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  margin-bottom: 60px;

  >.title {
    color: #333;
    flex: 0 0 110px;
    display: flex;
    align-items: center;
    background-color: #fff;

    span {
      font-size: 24px;
      margin-right: 5px;
    }
  }

  >* {
    margin-left: 10px;
  }

  .space-right {
    margin-left: auto;
  }
}

.img-box {
  width: 100%;
  overflow: auto;
  display: flex;

  >div {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }
  }
}

.theme-img {
  flex: 0 0 200px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  position: relative;
  background-color: rgba(0, 0, 0, 0.02);
  background-size: cover;
  background-position: center;

  &.add {
    display: flex;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: rgba(0, 0, 0, 0.88);

    .anticon-plus {
      font-size: 20px;
      margin-bottom: 6px;
    }
  }

  .edit {
    bottom: 0;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    background-color: #d3d3d390;

    &>div {
      width: 50%;
      display: flex;
      align-items: center;
      padding: 5px 0;
      cursor: pointer;
      justify-content: center;
    }
  }
}

.jx-select {
  min-width: 150px;
}

.jp-list {
  display: flex;
  margin-left: 80px;
  overflow-x: auto;

  >div {
    flex: 0 0 200px;
  }

  .jp-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #333;
  }

  >* {
    margin-left: 10px;
  }
}

.scv-list {
  padding: 5px 0;
  display: flex;
  width: 100%;
  overflow: auto;

  &:deep .ant-upload {
    padding: 5px 10px;
    width: 154px;

    .ant-upload-btn {
      width: 134px;
    }
  }

  .scv-box {
    cursor: pointer;
    margin-left: 10px;
    width: 154px;
    height: 44px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-sizing: border-box;
    padding: 8px;
    position: relative;
    color: #333;

    .title {
      display: block;
      width: 100%;
      margin-left: 5px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .csv-del {
      position: absolute;
      right: -8px;
      top: -10px;
      font-size: 18px;
    }
  }
}

.edit-icon {
  color: #333;
  cursor: pointer;
}

.csv-tips {
  margin-left: 90px;
  margin-bottom: 40px;
  font-size: 12px;
  color: gray;

  .down {
    color: #1677ff;
    cursor: pointer;
    text-decoration: underline;
  }
}

.mb-24 {
  margin-bottom: 24px;
}
</style>
